import { connect } from 'react-redux';
import React, { Component } from 'react';
import { Tabs, Table, Row, Col, Input, Tooltip } from 'antd';
import HitResult from './result';
import PolicyFlow from './policyFlow';
import moment from 'moment';
const { TabPane } = Tabs;
const { Search } = Input;

function mapStateToProps(state) {
  return {
    hit_handle: state.code.hit_handle,
  };
}

@connect(mapStateToProps)
class PolicyDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: '1',
      business_data_key: '',
      business_data_shows: [],
      base_data_key: '',
      base_data_shows: [],
    };
  }

  componentDidMount() {
    if (
      this.props.record &&
      this.props.record.rules &&
      this.props.record.business_data &&
      this.props.record.base_data
    ) {
      this.props.record.rules.forEach((item) => {
        let bRes = this.props.record.business_data.filter((bItem) => bItem.code === item.left_var_code);
        if (bRes && bRes.length > 0) {
          item.left_value = bRes[0].value;
        } else {
          bRes = this.props.record.base_data.filter((bItem) => bItem.code === item.left_var_code);
          if (bRes && bRes.length > 0) {
            item.left_value = bRes[0].value;
          }
        }
      });
    }

    this.filterBusinessData('');
    this.filterBaseData('');
  }

  filterBusinessData = (e) => {
    this.setState({
      business_data_key: e,
      business_data_shows:
        this.props &&
        this.props.business_data &&
        this.props.business_data.filter(
          (item) => item.name.indexOf(e) !== -1 || item.code.toString().indexOf(e) !== -1
        ),
    });
  };

  filterBaseData = (e) => {
    this.setState({
      base_data_key: e,
      base_data_shows:
        this.props &&
        this.props.base_data &&
        this.props.base_data.filter((item) => item.name.indexOf(e) !== -1 || item.code.toString().indexOf(e) !== -1),
    });
  };

  tabChange = (e) => {
    this.setState({
      activeKey: e,
    });
  };

  render() {
    const businessColumns = [
      {
        title: '序号',
        key: 'index',
        dataIndex: 'index',
        render: (text, record, index) => {
          return <>{index + 1}</>;
        },
      },
      {
        title: '名称',
        key: 'name',
        dataIndex: 'name',
      },
      {
        title: 'code',
        key: 'code',
        dataIndex: 'code',
      },
      {
        title: '类型',
        key: 'type',
        dataIndex: 'type',
        width: 100,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div>{text === 'field' ? '字段' : text === 'feature' ? '指标' : '其他'}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '数值',
        key: 'value',
        dataIndex: 'value',
        render: (text, record) => {
          let value = '';
          if (record.data_type === 'date') {
            value = (text && moment(Number(text)).format('YYYY-MM-DD HH:mm:ss')) || '';
          } else if (record.data_type === 'boolean') {
            value = text === true ? 'true' : 'false';
          } else {
            value = text;
          }
          return (
            <Tooltip title={value}>
              <div>{value}</div>
            </Tooltip>
          );
        },
      },
    ];

    const baseColumns = [
      {
        title: '序号',
        key: 'strategy_id',
        dataIndex: 'strategy_id',
        render: (text, record, index) => `${index + 1}`,
      },
      {
        title: '名称',
        key: 'name',
        dataIndex: 'name',
        render: (text, record, index) => text,
      },
      {
        title: 'code',
        key: 'code',
        dataIndex: 'code',
        render: (text, record, index) => text,
      },
      {
        title: '类型',
        key: 'type',
        dataIndex: 'type',
        render: (text, record, index) => text,
      },
      {
        title: '数值',
        key: 'value',
        dataIndex: 'value',
        render: (text, record) => {
          let value = '';
          if (record.data_type === 'date') {
            value = (text && moment(Number(text)).format('YYYY-MM-DD HH:mm:ss')) || '';
          } else if (record.data_type === 'boolean') {
            value = text === true ? 'true' : 'false';
          } else {
            value = text;
          }
          return (
            <Tooltip title={value}>
              <div>{value}</div>
            </Tooltip>
          );
        },
      },
    ];
    return (
      <div style={{ marginBottom: '30px' }}>
        {this.props.onlyShowHitDetail ? (
          this.props.isFlow ? (
            <PolicyFlow {...this.props} />
          ) : (
            <HitResult {...this.props} />
          )
        ) : (
          <Tabs defaultActiveKey='1' onChange={this.tabChange} activeKey={this.state.activeKey}>
            <TabPane tab='规则执行数据' key='1'>
              {this.props.isFlow ? <PolicyFlow {...this.props} /> : <HitResult {...this.props} />}
            </TabPane>

            <TabPane tab='业务数据' key='2'>
              <Row type='flex' justify='end'>
                <Col span={8}>
                  <Search placeholder='请输入字段名|指标名|code进行搜索' onSearch={this.filterBusinessData} />
                </Col>
              </Row>

              <Table
                dataSource={this.state.business_data_shows}
                columns={businessColumns}
                pagination={false}
                rowKey='code'
              />
            </TabPane>

            <TabPane tab='基本属性' key='3'>
              <Row type='flex' justify='end'>
                <Col span={8}>
                  <Search placeholder='请输入名称|code进行搜索' onSearch={this.filterBaseData} />
                </Col>
              </Row>
              <Table dataSource={this.state.base_data_shows} columns={baseColumns} pagination={false} rowKey='code' />
            </TabPane>
          </Tabs>
        )}
      </div>
    );
  }
}

export default PolicyDetail;
